<template>
	<view class="content">
		<!-- 商品信息 -->
		<view class="title">
			商品信息
		</view>
		<u--form labelPosition="left" :model="model1" ref="uForm">
			<!-- 品牌 -->
			<u-form-item label="品牌:" borderBottom @click="showbrand = true;">
				<u--input v-model="model1.userInfo.brand" disabled disabledColor="#ffffff" placeholder="请选择"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<!-- 型号 -->
			<u-form-item label="型号:" borderBottom @click="showmodel = true;">
				<u--input v-model="model1.userInfo.model" disabled disabledColor="#ffffff" placeholder="请选择"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<!-- 内存 -->
			<u-form-item label="内存:" borderBottom @click="showMemory = true;">
				<u--input v-model="model1.userInfo.Memory" disabled disabledColor="#ffffff" placeholder="请选择"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<!-- 指导价 -->
			<u-form-item label="指导价:" borderBottom>
				<u--input v-model="model.userInfo.Guidep" border="none"></u--input>
			</u-form-item>

			<!-- x期租金 -->
			<u-form-item label="6期租金:" borderBottom>
				<u--input v-model="model.userInfo.rent" border="none"></u--input>
			</u-form-item>

			<!-- 花呗总额度 -->
			<u-form-item label="花呗总额度:" borderBottom>
				<u--input v-model="model.userInfo.flowers" border="none"></u--input>
			</u-form-item>

			<!-- 芝麻信用分 -->
			<u-form-item label="芝麻信用分:" borderBottom>
				<u--input v-model="model.userInfo.credit" border="none"></u--input>
			</u-form-item>

			<!-- 买断价 -->
			<u-form-item label="买断价:" borderBottom>
				<u--input v-model="model.userInfo.buyout" border="none"></u--input>
			</u-form-item>
		</u--form>

		<!-- 金额信息 -->
		<view class="title">
			金额信息
		</view>
		<view class="main">
			<view>
				<view>
					手机售价:
				</view>
				<view class="textred">
					注:手机售价 = 租金 + 买断价
				</view>
			</view>
			<view>
				￥
			</view>
		</view>
		<view class="main">
			<view>
				<view>
					会员服务费:
				</view>
				<view class="textred">
					注:手机售价 * 20%
				</view>
			</view>
			<view>
				￥
			</view>
		</view>
		<view class="main">
			<view>
				合计:
			</view>
			<view>
				￥
			</view>
		</view>
		
		<!-- 租机明细 -->
		<view class="title">
			租机明细
		</view>
		<view class="main">
			<view>
				会员服务费:
			</view>
			<view>
				￥
			</view>
		</view>
		
		<view class="main">
			<view>
				第1期:
			</view>
			<view>
				￥
			</view>
		</view>
		
		<view class="main">
			<view>
				第2期:
			</view>
			<view>
				￥
			</view>
		</view>
		
		<view class="main">
			<view>
				第3期
			</view>
			<view>
				￥
			</view>
		</view>
		
		<view class="main">
			<view>
				买断价 
			</view>
			<view>
				￥
			</view>
		</view>



		<!-- 提交 -->
		<u-button @click="submit" type="primary">下一步</u-button>

		<!-- 品牌 -->
		<u-action-sheet :show="showbrand" :actions="brand" title="请选择" @close="showbrand = false" @select="brandSelect">
		</u-action-sheet>

		<!-- 型号 -->
		<u-action-sheet :show="showmodel" :actions="model" title="请选择" @close="showmodel = false" @select="modelSelect">
		</u-action-sheet>

		<!-- 内存 -->
		<u-action-sheet :show="showMemory" :actions="Memory" title="请选择" @close="showMemory = false"
			@select="MemorySelect">
		</u-action-sheet>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showbrand: false,
				showmodel: false,
				showMemory: false,
				model1: {
					userInfo: {
						brand: '',
						model: '',
						Memory: '',
						Guidep: '',
						rent: '',
						flowers: '',
						credit: '',
						buyout: '',
					},
				},
				brand: [{
						name: '苹果',
					},
					{
						name: '华为',
					},
					{
						name: '红米',
					},{
						name: '华为',
					},
					{
						name: '红米',
					}
				],
				model: [{
						name: '13',
					},
					{
						name: '14',
					},
					{
						name: '15',
					},
				],
				Memory: [{
						name: '64G',
					},
					{
						name: '128G',
					},
					{
						name: '256G',
					},
				],
			}
		},
		methods: {
			brandSelect(e) {
				console.log(e);
				this.model1.userInfo.brand = e.name;
			},
			modelSelect(e) {
				console.log(e);
				this.model1.userInfo.model = e.name;
			},
			MemorySelect(e) {
				console.log(e);
				this.model1.userInfo.Memory = e.name;
			},
			submit() {
				console.log("点击了提交");
			}
		},
		mounted() {

		},
	}
</script>

<style lang="scss">
	.content {
		padding: 40rpx 50rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}

	.main {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
		font-size: 26rpx;

		.textred {
			color: red;
			margin-top: 10rpx;
		}
	}

	// display: inline-block !important;
	// <u-picker :columns="actions" @confirm="brandSelect" :show="showbrand" @cancel="showbrand = false" keyName="label">
	// </u-picker> -->
	//  actions: [
	//     [{
	//         label: '雪月夜',
	//         id: 2021
	//     }, {
	//         label: '冷夜雨',
	//         id: 804
	//     }]
	// ],
</style>